import React, { Component } from 'react';

import '../styles/search.css'
// 导入封装的方法(热门搜索)
import { getHot_search } from '../api/index';

import { NavBar,SearchBar } from 'antd-mobile';

class SearchJsx extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isHot: []
        }
    }
    back() {
        this.props.history.go(-1)
    }
    componentDidMount() {
        getHot_search().then(res=>{
            console.log(res.data.list);
            this.setState({isHot:res.data.list})
        })
    }
    render() {
        return (
            <div className='search'>
                 <NavBar onBack={()=>{this.back()}}>搜索</NavBar>
                 <SearchBar placeholder='请输入内容' showCancelButton={() => true} />
                 <div className='lately'>
                    <h3>最近搜索</h3>
                 </div>
                 <div className='hot'>
                    <h3>热门搜索</h3>
                    <div className='hotBox'>
                        {
                            this.state.isHot.map((item,index)=>{
                                return (
                                    <div className='hot_box' key={index}>{item}</div>
                                )
                            })
                        }
                    </div>
                    
                 </div>
            </div>
        );
    }
}

export default SearchJsx;